<template>
  <div class="profile-page">
    <!-- 顶部导航栏 -->
    <HeaderNav />
    
    <!-- 主内容区域 -->
    <div class="main-content">
      <!-- 面包屑导航 -->
      <div class="breadcrumb">
        <span class="breadcrumb-item">首页</span>
        <span class="breadcrumb-separator">/</span>
        <span class="breadcrumb-item active">个人中心</span>
      </div>

      <!-- 页面标题 -->
      <div class="page-header">
        <h1 class="page-title">
          <div class="page-title-icon">👤</div>
          个人中心
        </h1>
        <p class="page-description">管理您的个人信息和账户设置</p>
      </div>

      <!-- 侧边栏和内容区域 -->
      <div class="content-wrapper">
        <!-- 侧边栏 -->
        <div class="sidebar">
          <div class="sidebar-title">
            <div class="sidebar-title-icon">个</div>
            个人中心
          </div>
          
          <ul class="sidebar-menu">
            <li 
              class="menu-item" 
              :class="{ active: activeTab === 'profile' }"
              @click="handleMenuClick('profile')"
            >
              <span class="menu-icon">👤</span>
              个人信息
            </li>
            <li 
              class="menu-item" 
              :class="{ active: activeTab === 'orders' }"
              @click="handleMenuClick('orders')"
            >
              <span class="menu-icon">📦</span>
              我的订单
            </li>
            <li 
              class="menu-item" 
              :class="{ active: activeTab === 'favorites' }"
              @click="handleMenuClick('favorites')"
            >
              <span class="menu-icon">❤️</span>
              我的收藏
            </li>
            <li 
              class="menu-item" 
              :class="{ active: activeTab === 'address' }"
              @click="handleMenuClick('address')"
            >
              <span class="menu-icon">📍</span>
              收货地址
            </li>
            <li 
              class="menu-item" 
              :class="{ active: activeTab === 'card-exchange' }"
              @click="handleMenuClick('card-exchange')"
            >
              <span class="menu-icon">🎁</span>
              福利卡兑换
            </li>
          </ul>
        </div>
        
        <!-- 右侧内容区域 -->
        <div class="content-area">
          <!-- 个人信息Tab -->
          <div v-if="activeTab === 'profile'" class="tab-content">
      
            <!-- 个人信息卡片 -->
            <div class="profile-card">
        <div class="card-header">
          <h2 class="card-title">
            <span class="card-icon">📋</span>
            基本信息
          </h2>
        </div>
        
        <div class="card-content">
          <!-- 头像区域 -->
          <div class="avatar-section">
            <div class="avatar-container">
              <el-avatar 
                :size="80" 
                :src="avatarUrl"
                class="user-avatar"
              >
                {{ userInitial }}
              </el-avatar>
              <el-upload
                class="avatar-uploader"
                :show-file-list="false"
                :before-upload="beforeAvatarUpload"
                :http-request="handleAvatarUpload"
                accept="image/*"
              >
                <el-button type="primary" size="small" class="upload-btn">
                  <span class="btn-icon">📷</span>
                  更换头像
                </el-button>
              </el-upload>
            </div>
            <div class="user-info">
              <h3 class="user-name">{{ profileData.realName || '未设置' }}</h3>
              <p class="user-role">{{ userRole }}</p>
            </div>
          </div>
          
          <!-- 只读信息区域 -->
          <div class="readonly-info">
            <div class="info-grid">
              <div class="info-item">
                <label class="info-label">用户名</label>
                <div class="info-value">{{ profileData.username || '未设置' }}</div>
              </div>
              <div class="info-item">
                <label class="info-label">员工工号</label>
                <div class="info-value">{{ profileData.employeeNo || '未设置' }}</div>
              </div>
              <div class="info-item">
                <label class="info-label">真实姓名</label>
                <div class="info-value">{{ profileData.realName || '未设置' }}</div>
              </div>
              <div class="info-item">
                <label class="info-label">所属部门</label>
                <div class="info-value">{{ profileData.department || '未设置' }}</div>
              </div>
              <div class="info-item">
                <label class="info-label">职位</label>
                <div class="info-value">{{ profileData.position || '未设置' }}</div>
              </div>
              <div class="info-item">
                <label class="info-label">账户余额</label>
                <div class="info-value balance-value">¥{{ profileData.accountBalance || '0.00' }}</div>
              </div>
            </div>
          </div>
          
          <!-- 可编辑信息区域 -->
          <div class="editable-info">
            <h3 class="section-title">可编辑信息</h3>
            <el-form 
              ref="profileFormRef"
              :model="profileForm" 
              :rules="profileRules" 
              label-width="100px"
              class="profile-form"
            >
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="手机号" prop="phone">
                    <el-input 
                      v-model="profileForm.phone" 
                      placeholder="请输入手机号"
                      clearable
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="邮箱" prop="email">
                    <el-input 
                      v-model="profileForm.email" 
                      placeholder="请输入邮箱"
                      clearable
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="生日" prop="birthday">
                    <el-date-picker
                      v-model="profileForm.birthday"
                      type="date"
                      placeholder="请选择生日"
                      format="YYYY-MM-DD"
                      value-format="YYYY-MM-DD"
                      style="width: 100%"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              
              <div class="form-actions">
                <el-button 
                  class="save-btn" 
                  type="primary" 
                  @click="handleSaveProfile"
                  :loading="saving"
                >
                  <span class="btn-icon">💾</span>
                  保存信息
                </el-button>
                <el-button 
                  class="reset-btn" 
                  @click="handleResetProfile"
                >
                  <span class="btn-icon">🔄</span>
                  重置
                </el-button>
                <el-button 
                  class="password-btn" 
                  type="warning" 
                  @click="showPasswordDialog = true"
                >
                  <span class="btn-icon">🔑</span>
                  修改密码
                </el-button>
                <el-button 
                  class="payment-password-btn" 
                  type="danger" 
                  @click="showPaymentPasswordDialog = true"
                >
                  <span class="btn-icon">💳</span>
                  修改支付密码
                </el-button>
              </div>
            </el-form>
          </div>
        </div>
      </div>
          </div>

          <!-- 收货地址Tab -->
          <div v-if="activeTab === 'address'" class="tab-content">
            <AddressManagement />
          </div>
        </div>
      </div>
    </div>
    
    <!-- 修改密码弹窗 -->
    <el-dialog
      v-model="showPasswordDialog"
      title="修改密码"
      width="500px"
      :close-on-click-modal="false"
      class="password-dialog"
    >
      <el-form 
        ref="passwordFormRef"
        :model="passwordForm" 
        :rules="passwordRules" 
        label-width="120px"
        class="password-form"
      >
        <el-form-item label="旧密码" prop="oldPassword">
          <el-input 
            v-model="passwordForm.oldPassword" 
            type="password" 
            placeholder="请输入旧密码"
            show-password
            clearable
          />
        </el-form-item>
        
        <el-form-item label="新密码" prop="newPassword">
          <el-input 
            v-model="passwordForm.newPassword" 
            type="password" 
            placeholder="请输入新密码（6-20位）"
            show-password
            clearable
          />
        </el-form-item>
        
        <el-form-item label="确认新密码" prop="confirmPassword">
          <el-input 
            v-model="passwordForm.confirmPassword" 
            type="password" 
            placeholder="请再次输入新密码"
            show-password
            clearable
          />
        </el-form-item>
      </el-form>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClosePasswordDialog">取消</el-button>
          <el-button 
            type="primary" 
            @click="handleChangePassword"
            :loading="changingPassword"
          >
            确认修改
          </el-button>
        </div>
      </template>
    </el-dialog>
    
    <!-- 修改支付密码弹窗 -->
    <el-dialog
      v-model="showPaymentPasswordDialog"
      title="修改支付密码"
      width="500px"
      :close-on-click-modal="false"
      class="password-dialog"
    >
      <el-form 
        ref="paymentPasswordFormRef"
        :model="paymentPasswordForm" 
        :rules="paymentPasswordRules" 
        label-width="120px"
        class="password-form"
      >
        <el-form-item label="旧支付密码" prop="oldPaymentPassword">
          <el-input 
            v-model="paymentPasswordForm.oldPaymentPassword" 
            type="password" 
            placeholder="请输入旧支付密码"
            show-password
            clearable
          />
        </el-form-item>
        
        <el-form-item label="新支付密码" prop="newPaymentPassword">
          <el-input 
            v-model="paymentPasswordForm.newPaymentPassword" 
            type="password" 
            placeholder="请输入新支付密码（6-20位）"
            show-password
            clearable
          />
        </el-form-item>
        
        <el-form-item label="确认新密码" prop="confirmPaymentPassword">
          <el-input 
            v-model="paymentPasswordForm.confirmPaymentPassword" 
            type="password" 
            placeholder="请再次输入新支付密码"
            show-password
            clearable
          />
        </el-form-item>
      </el-form>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClosePaymentPasswordDialog">取消</el-button>
          <el-button 
            type="primary" 
            @click="handleChangePaymentPassword"
            :loading="changingPaymentPassword"
          >
            确认修改
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import HeaderNav from '@/components/HeaderNav.vue'
import AddressManagement from './components/AddressManagement.vue'
import { useUserStore } from '@/stores/user'
import { getMyProfile, updateMyProfile, updateMyPassword, updateMyPaymentPassword, uploadAvatar } from '@/api/profile'
import { setUserInfo } from '@/utils/auth'

// 路由
const router = useRouter()

// 使用userStore
const userStore = useUserStore()

// 响应式数据
const activeTab = ref('profile') // 默认显示个人信息tab
const profileData = ref({})
const loading = ref(false)
const saving = ref(false)
const changingPassword = ref(false)
const showPasswordDialog = ref(false)
const changingPaymentPassword = ref(false)
const showPaymentPasswordDialog = ref(false)

// 个人信息表单
const profileFormRef = ref()
const profileForm = reactive({
  phone: '',
  email: '',
  birthday: ''
})

const profileRules = {
  phone: [
    { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
  ],
  email: [
    { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
  ]
}

// 密码修改表单
const passwordFormRef = ref()
const passwordForm = reactive({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
})

const passwordRules = {
  oldPassword: [
    { required: true, message: '请输入旧密码', trigger: 'blur' }
  ],
  newPassword: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度必须在6-20位之间', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请确认新密码', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (value !== passwordForm.newPassword) {
          callback(new Error('两次输入的密码不一致'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
}

// 支付密码修改表单
const paymentPasswordFormRef = ref()
const paymentPasswordForm = reactive({
  oldPaymentPassword: '',
  newPaymentPassword: '',
  confirmPaymentPassword: ''
})

const paymentPasswordRules = {
  oldPaymentPassword: [
    { required: true, message: '请输入旧支付密码', trigger: 'blur' }
  ],
  newPaymentPassword: [
    { required: true, message: '请输入新支付密码', trigger: 'blur' },
    { min: 6, max: 20, message: '支付密码长度必须在6-20位之间', trigger: 'blur' }
  ],
  confirmPaymentPassword: [
    { required: true, message: '请确认新支付密码', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (value !== paymentPasswordForm.newPaymentPassword) {
          callback(new Error('两次输入的支付密码不一致'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
}

// 计算属性
const userInitial = computed(() => {
  const name = profileData.value.realName
  return name ? name.charAt(0).toUpperCase() : 'U'
})

const userRole = computed(() => {
  const roles = profileData.value.roles || []
  if (roles.length === 0) return '普通用户'
  
  const roleNames = roles.map(role => role.roleName).join('、')
  return roleNames
})

// 头像时间戳，用于强制刷新头像
const avatarTimestamp = ref(Date.now())

// 计算头像URL（响应式，会在avatarTimestamp变化时自动更新）
const avatarUrl = computed(() => {
  const avatar = profileData.value.avatar
  if (!avatar) return null
  // 如果是完整URL，直接返回
  if (avatar.startsWith('http')) return avatar
  // 如果是相对路径，拼接基础URL
  // 后端服务运行在8092端口，需要加上/api前缀
  // 添加时间戳参数避免缓存
  const baseUrl = `http://localhost:8092/api${avatar}`
  const separator = avatar.includes('?') ? '&' : '?'
  // 使用avatarTimestamp确保头像更新时能强制刷新
  return `${baseUrl}${separator}_t=${avatarTimestamp.value}`
})

// 获取个人信息
const fetchProfile = async () => {
  loading.value = true
  try {
    const response = await getMyProfile()
    if (response.success) {
      profileData.value = response.data
      
      // 填充表单数据
      profileForm.phone = response.data.phone || ''
      profileForm.email = response.data.email || ''
      profileForm.birthday = response.data.birthday || ''
    } else {
      ElMessage.error(response.message || '获取个人信息失败')
    }
  } catch (error) {
    console.error('获取个人信息失败:', error)
    ElMessage.error('获取个人信息失败')
  } finally {
    loading.value = false
  }
}

// 保存个人信息
const handleSaveProfile = async () => {
  try {
    await profileFormRef.value.validate()
    
    saving.value = true
    const response = await updateMyProfile({
      phone: profileForm.phone,
      email: profileForm.email,
      birthday: profileForm.birthday
    })
    
    if (response.success) {
      ElMessage.success('个人信息更新成功')
      // 重新获取最新数据
      await fetchProfile()
    } else {
      ElMessage.error(response.message || '更新失败')
    }
  } catch (error) {
    console.error('保存个人信息失败:', error)
    ElMessage.error('保存失败')
  } finally {
    saving.value = false
  }
}

// 重置个人信息表单
const handleResetProfile = () => {
  profileForm.phone = profileData.value.phone || ''
  profileForm.email = profileData.value.email || ''
  profileForm.birthday = profileData.value.birthday || ''
  profileFormRef.value?.clearValidate()
}

// 头像上传前验证
const beforeAvatarUpload = (file) => {
  const isImage = file.type.startsWith('image/')
  const isLt5M = file.size / 1024 / 1024 < 5

  if (!isImage) {
    ElMessage.error('只能上传图片文件!')
    return false
  }
  if (!isLt5M) {
    ElMessage.error('图片大小不能超过 5MB!')
    return false
  }
  return true
}

// 处理头像上传
const handleAvatarUpload = async (options) => {
  try {
    const response = await uploadAvatar(options.file)
    if (response.success) {
      ElMessage.success('头像上传成功')
      
      // 获取上传返回的头像URL（response.data 就是头像URL，格式：/avatars/xxx.jpg）
      const avatarUrl = response.data
      
      // 更新头像时间戳，强制刷新头像显示
      avatarTimestamp.value = Date.now()
      
      // 立即更新本地头像URL，确保页面立即显示新头像
      profileData.value.avatar = avatarUrl
      
      // 同时更新全局用户信息中的头像，确保Header头像也被更新
      if (userStore.userInfo) {
        userStore.userInfo.avatar = avatarUrl
        // 同时更新本地存储的用户信息
        setUserInfo(userStore.userInfo)
      }
      
      // 后台刷新用户信息（不阻塞显示，避免覆盖）
      userStore.refreshUserInfo().then(() => {
        // 刷新完成后，如果后端返回的头像和当前设置的不同，使用后端返回的
        if (userStore.userInfo && userStore.userInfo.avatar && 
            userStore.userInfo.avatar !== avatarUrl) {
          profileData.value.avatar = userStore.userInfo.avatar
        }
      }).catch(err => {
        console.error('刷新用户信息失败:', err)
        // 即使刷新失败，也保持使用上传返回的URL
      })
    } else {
      ElMessage.error(response.message || '头像上传失败')
    }
  } catch (error) {
    console.error('头像上传失败:', error)
    ElMessage.error('头像上传失败')
  }
}

// 修改密码
const handleChangePassword = async () => {
  try {
    await passwordFormRef.value.validate()
    
    changingPassword.value = true
    const response = await updateMyPassword({
      oldPassword: passwordForm.oldPassword,
      newPassword: passwordForm.newPassword,
      confirmPassword: passwordForm.confirmPassword
    })
    
    if (response.success) {
      ElMessage.success('密码修改成功')
      // 关闭弹窗并清空表单
      handleClosePasswordDialog()
    } else {
      ElMessage.error(response.message || '密码修改失败')
    }
  } catch (error) {
    console.error('修改密码失败:', error)
    ElMessage.error('修改密码失败')
  } finally {
    changingPassword.value = false
  }
}

// 关闭密码修改弹窗
const handleClosePasswordDialog = () => {
  showPasswordDialog.value = false
  // 清空密码表单
  passwordForm.oldPassword = ''
  passwordForm.newPassword = ''
  passwordForm.confirmPassword = ''
  passwordFormRef.value?.clearValidate()
}

// 修改支付密码
const handleChangePaymentPassword = async () => {
  try {
    await paymentPasswordFormRef.value.validate()
    
    changingPaymentPassword.value = true
    const response = await updateMyPaymentPassword({
      oldPaymentPassword: paymentPasswordForm.oldPaymentPassword,
      newPaymentPassword: paymentPasswordForm.newPaymentPassword,
      confirmPaymentPassword: paymentPasswordForm.confirmPaymentPassword
    })
    
    if (response.success) {
      ElMessage.success('支付密码修改成功')
      // 关闭弹窗并清空表单
      handleClosePaymentPasswordDialog()
    } else {
      ElMessage.error(response.message || '支付密码修改失败')
    }
  } catch (error) {
    console.error('修改支付密码失败:', error)
    ElMessage.error('修改支付密码失败')
  } finally {
    changingPaymentPassword.value = false
  }
}

// 关闭支付密码修改弹窗
const handleClosePaymentPasswordDialog = () => {
  showPaymentPasswordDialog.value = false
  // 清空支付密码表单
  paymentPasswordForm.oldPaymentPassword = ''
  paymentPasswordForm.newPaymentPassword = ''
  paymentPasswordForm.confirmPaymentPassword = ''
  paymentPasswordFormRef.value?.clearValidate()
}

// 处理菜单点击
const handleMenuClick = (tab) => {
  if (tab === 'orders') {
    // 跳转到订单列表页面
    router.push('/order/list')
  } else if (tab === 'favorites') {
    // 跳转到收藏页面
    router.push('/favorites')
  } else if (tab === 'card-exchange') {
    // 跳转到福利卡兑换页面
    router.push('/card-exchange')
  } else {
    // 切换tab
    activeTab.value = tab
  }
}

// 初始化
onMounted(() => {
  fetchProfile()
  
  // 检查URL参数，如果有tab参数则切换到对应的tab
  const urlParams = new URLSearchParams(window.location.search)
  const tab = urlParams.get('tab')
  if (tab && ['profile', 'address'].includes(tab)) {
    activeTab.value = tab
  }
})
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.profile-page {
  min-height: 100vh;
  background-color: #f5f7fa;
}

.main-content {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

/* 面包屑导航 */
.breadcrumb {
  background-color: white;
  border-radius: 12px;
  padding: 15px 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
}

.breadcrumb-item {
  color: #606266;
  font-size: 14px;
}

.breadcrumb-item.active {
  color: #409EFF;
}

.breadcrumb-separator {
  margin: 0 8px;
  color: #c0c4cc;
}

/* 页面标题 */
.page-header {
  margin-bottom: 20px;
}

/* 内容包装器 */
.content-wrapper {
  display: flex;
  gap: 20px;
}

/* 侧边栏 */
.sidebar {
  width: 220px;
  background-color: white;
  border-radius: 12px;
  padding: 20px 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  align-self: flex-start;
  flex-shrink: 0;
}

.sidebar-title {
  padding: 0 20px 15px;
  font-weight: 600;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

.sidebar-title-icon {
  width: 20px;
  height: 20px;
  background-color: #409EFF;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 8px;
  color: white;
  font-size: 12px;
}

.sidebar-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu-item {
  padding: 12px 20px;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  color: #606266;
  
  &:hover {
    background-color: #f5f7fa;
    color: #409EFF;
  }
  
  &.active {
    background-color: #f0f9ff;
    color: #409EFF;
    border-right: 3px solid #409EFF;
  }
}

.menu-icon {
  margin-right: 10px;
  font-size: 16px;
}

/* 右侧内容区域 */
.content-area {
  flex: 1;
  min-width: 0;
}

.tab-content {
  width: 100%;
}

.page-title {
  font-size: 28px;
  font-weight: 600;
  color: #303133;
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.page-title-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #409EFF 0%, #66b1ff 100%);
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 12px;
  color: white;
  font-size: 20px;
}

.page-description {
  color: #606266;
  font-size: 14px;
  margin-left: 52px;
}

/* 卡片样式 */
.profile-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  overflow: hidden;
}

.card-header {
  background: linear-gradient(135deg, #409EFF 0%, #66b1ff 100%);
  padding: 20px 24px;
  color: white;
}

.card-title {
  font-size: 18px;
  font-weight: 600;
  display: flex;
  align-items: center;
  margin: 0;
}

.card-icon {
  margin-right: 8px;
  font-size: 20px;
}

.card-content {
  padding: 24px;
}

/* 头像区域 */
.avatar-section {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f0f0f0;
}

.avatar-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 30px;
}

.user-avatar {
  margin-bottom: 10px;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
}

.avatar-uploader {
  :deep(.el-upload) {
    border: none;
    background: none;
  }
}

.upload-btn {
  background: linear-gradient(135deg, #409EFF 0%, #66b1ff 100%);
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  
  &:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
  }
}

.user-info {
  flex: 1;
}

.user-name {
  font-size: 24px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 8px;
}

.user-role {
  color: #606266;
  font-size: 14px;
  background: #f0f9ff;
  padding: 4px 12px;
  border-radius: 12px;
  display: inline-block;
  border: 1px solid #e1f5fe;
}

/* 只读信息区域 */
.readonly-info {
  margin-bottom: 30px;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.info-item {
  display: flex;
  flex-direction: column;
}

.info-label {
  font-size: 14px;
  color: #909399;
  margin-bottom: 8px;
  font-weight: 500;
}

.info-value {
  font-size: 16px;
  color: #303133;
  padding: 8px 12px;
  background: #f8f9fa;
  border-radius: 6px;
  border: 1px solid #e9ecef;
}

.balance-value {
  color: #67c23a;
  font-weight: 600;
}

/* 可编辑信息区域 */
.editable-info {
  border-top: 1px solid #f0f0f0;
  padding-top: 20px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 20px;
}

.profile-form {
  max-width: 600px;
}

.form-actions {
  display: flex;
  gap: 12px;
  margin-top: 20px;
  flex-wrap: wrap;
}

/* 按钮样式 */
.save-btn {
  background: linear-gradient(135deg, #409EFF 0%, #66b1ff 100%);
  border: none;
  border-radius: 6px;
  padding: 10px 20px;
  font-weight: 500;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  
  &:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
  }
}

.reset-btn {
  background: #f5f7fa;
  border: 1px solid #dcdfe6;
  color: #606266;
  border-radius: 6px;
  padding: 10px 20px;
  font-weight: 500;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  
  &:hover {
    background: #ecf5ff;
    border-color: #409EFF;
    color: #409EFF;
  }
}

.password-btn {
  background: linear-gradient(135deg, #E6A23C 0%, #f0c78a 100%);
  border: none;
  border-radius: 6px;
  padding: 10px 20px;
  font-weight: 500;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  
  &:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(230, 162, 60, 0.3);
  }
}

.btn-icon {
  font-size: 14px;
}

/* 弹窗样式 */
.password-dialog {
  :deep(.el-dialog__header) {
    background: linear-gradient(135deg, #409EFF 0%, #66b1ff 100%);
    color: white;
    padding: 20px 24px;
    margin: 0;
  }
  
  :deep(.el-dialog__title) {
    color: white;
    font-weight: 600;
  }
  
  :deep(.el-dialog__headerbtn .el-dialog__close) {
    color: white;
    font-size: 20px;
  }
  
  :deep(.el-dialog__body) {
    padding: 24px;
  }
  
  :deep(.el-dialog__footer) {
    padding: 16px 24px 24px;
  }
}

.password-form {
  max-width: 400px;
  margin: 0 auto;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* 表单样式优化 */
:deep(.el-form) {
  .el-row {
    margin-bottom: 0;
  }
  
  .el-form-item {
    margin-bottom: 24px;
    
    &:last-child {
      margin-bottom: 0;
    }
  }
  
  .el-form-item__label {
    color: #606266;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 8px;
  }
}

:deep(.el-input__wrapper) {
  border-radius: 8px;
  padding: 8px 15px;
  transition: all 0.3s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  
  &:hover {
    box-shadow: 0 2px 6px rgba(64, 158, 255, 0.15);
  }
  
  &.is-focus {
    box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
  }
}

:deep(.el-date-editor) {
  width: 100%;
  
  .el-input__wrapper {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    
    &:hover {
      box-shadow: 0 2px 6px rgba(64, 158, 255, 0.15);
    }
    
    &.is-focus {
      box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
    }
  }
}

/* 密码表单弹窗样式优化 */
.password-form {
  :deep(.el-form-item) {
    margin-bottom: 24px;
    
    &:last-child {
      margin-bottom: 0;
    }
  }
  
  :deep(.el-form-item__label) {
    color: #606266;
    font-weight: 600;
    font-size: 14px;
  }
  
  :deep(.el-input__wrapper) {
    border-radius: 8px;
    padding: 8px 15px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    
    &:hover {
      box-shadow: 0 2px 6px rgba(64, 158, 255, 0.15);
    }
    
    &.is-focus {
      box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
    }
  }
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .content-wrapper {
    flex-direction: column;
  }
  
  .sidebar {
    width: 100%;
  }
  
  .sidebar-menu {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    
    .menu-item {
      flex-shrink: 0;
      border-right: none;
      border-bottom: 3px solid transparent;
      
      &.active {
        border-right: none;
        border-bottom-color: #409EFF;
      }
    }
  }
}

@media (max-width: 768px) {
  .main-content {
    padding: 15px;
  }
  
  .page-title {
    font-size: 24px;
  }
  
  .page-title-icon {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }
  
  .breadcrumb {
    padding: 12px 15px;
    font-size: 13px;
  }
  
  .info-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .avatar-section {
    flex-direction: column;
    text-align: center;
  }
  
  .avatar-container {
    margin-right: 0;
    margin-bottom: 15px;
  }
  
  .form-actions {
    flex-direction: column;
  }
  
  .save-btn,
  .reset-btn,
  .password-btn {
    width: 100%;
    justify-content: center;
  }
  
  .password-dialog {
    :deep(.el-dialog) {
      width: 90%;
      margin: 0 auto;
    }
  }
}
</style>